<template>
  <div>
    <div class="ha">
      <van-nav-bar title="搜索" fixed="true" left-arrow @click="bank" />
    </div>
    <van-search
      v-model="key"
      placeholder="请输入搜索关键词"
      clearable="true"
      show-action
      @search="onSearch"
    >
      <template #action>
        <div class="btn" @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <div class="search-result">
      <div>
        <div class="result-item" v-for="(item, index) in shopp" :key="index">
          <van-row>
            <van-col span="8">
              <img
                @click="handleDetail(item)"
                :src="item.photo"
                style="width: 140px; height: 140px; border-radius: 5px;"
              />
            </van-col>
            <van-col span="16">
              <div class="item-content">
                <div class="item-title" @click="handleDetail(item)">{{ item.name }}</div>
                <div class="item-specs">
                  {{ item.specs }}
                  <div class="supplier">
                    <van-tag type="primary">{{ item.supplier }}</van-tag>
                  </div>
                </div>
                <div class="item-explain">{{ item.explain }}</div>
                <div class="item-sales">
                  <van-row>
                    <van-col span="12">
                      <van-tag type="danger">销量: {{ item.sales }}</van-tag>
                    </van-col>
                    <van-col span="12">
                      <label
                        style="font-size: 10px; float: right; color: gray;"
                      >剩余库存: {{ item.inventory - item.sales }}</label>
                    </van-col>
                  </van-row>
                </div>
                <div class="item-price">
                  ¥{{ item.isPromote === 1 ?item.promotePrice: item.price }}
                  <van-tag v-if="item.isPromote === 1" type="warning">促销</van-tag>
                </div>
                <div>
                  <div v-if="(item.inventory - item.sales) > 0" class="item-button">
                    <div @click="reduce(item)" v-if="item.carCount > 0" class="button">－</div>
                    <div v-if="item.carCount > 0" class="button-number">{{ item.carCount }}</div>
                    <div @click="add(item)" class="button">＋</div>
                  </div>
                  <div v-else class="item-button">
                    <van-tag type="default">售罄</van-tag>
                  </div>
                </div>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div v-if="shopp.length===0 && ac==0">
        <van-empty
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="180"
          description="没有该商品"
        />
      </div>
    </div>

    <!-- 购物车start -->
    <div class="car">
      <van-row>
        <van-col span="8">
          <van-icon name="cart-o" size="20px" @click="goCar" :badge="cars.total" />
        </van-col>
        <van-col span="10">
          <div class="car-price" style="font-size:12px;">
            合计:
            <b class="car-sum">¥{{ cars.sum }}</b>
          </div>
        </van-col>
        <van-col span="6">
          <div class="car-go" @click="goCar">去结算</div>
        </van-col>
      </van-row>
    </div>
    <!-- 购物车end -->
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, reactive, toRefs } from "vue";
import { searchGoods } from "../../api/goods";
export default {
  setup() {
    const data = reactive({
      key: "",
      shopp: [],
      ac: 1,
      cars: {
        sum: 0,
        total: 0,
        data: []
      }
    });
    const router = useRouter();
    const events = {
      handleDetail(val) {
        router.push("/shoppdetail/" + val.id);
      },
      // 查询商品
      onClickButton() {
        searchGoods({
          key: data.key,
          page: 1,
          limit: 9999
        }).then(res => {
          if (res.result === 0) {
            data.ac = 0;
            data.shopp = res.data.data;
            data.shopp.forEach(d => {
              let carss = data.cars.data.find(e => e.id == d.id);
              if (carss != undefined) {
                d.carCount = carss.carCount;
              }
            });
          }
        });
      },
      add(val) {
        let inventory = val.inventory - val.sales;
        if (val.carCount >= inventory) {
          showToast("库存不足");
          return;
        }

        let car = data.cars.data.find(d => d.id == val.id);
        if (car === undefined) {
          val.carCount = 1;
          data.cars.data.push(val);
        } else {
          val.carCount++;
          // localStorage.setItem("cart", JSON.stringify(data.cars));
        }
        data.cars.total++;
        data.cars.sum +=
          Math.round(
            (val.isPromote === 1 ? val.promotePrice : val.price) * 100
          ) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;

        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      reduce(val) {
        let car = data.cars.data.find(d => d.id == val.id);
        if (car.carCount <= 1) {
          for (let i = 0; i < data.cars.data.length; i++) {
            if (data.cars.data[i].id === car.id) {
              data.cars.data.splice(i, 1);
              break;
            }
          }
        }
        data.cars.total--;
        val.carCount--;
        data.cars.sum -=
          Math.round(
            (val.isPromote === 1 ? val.promotePrice : val.price) * 100
          ) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;
        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      bank() {
        router.go(-1);
      },
      goCar() {
        router.push("/car");
      }
    };
    onMounted(() => {
      if (localStorage.getItem("cart") != null) {
        data.cars = JSON.parse(localStorage.getItem("cart"));
      }
    });

    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style  scoped>
.car-price {
  width: 100%;
  background: linear-gradient(to right, #ee832b, #e97f07);
  height: 35px;
  text-align: center;
}

.car-go {
  padding-left: 2px;
  background: linear-gradient(to right, #f05023, #f04313);
  width: 100%;
  text-align: center;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  font-weight: bold;
}

.car-sum {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
}

.car {
  width: calc(100% - 50px);
  background: linear-gradient(to right, #e97f07, #ee832b);
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 12px;
  color: #fff;
  height: 35px;
  line-height: 35px;
  border-radius: 35px;
  padding-left: 20px;
}
.search-history {
  padding: 10px;
}
.history-title {
  font-weight: bold;
}

.history-content {
  white-space: pre-wrap;
  padding: 5px;
}

.history-label {
  margin-left: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 25px;
  font-size: 12px;
  text-align: center;
  background-color: #efefef;
  color: #ff976a;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}

.result-item {
  height: 160px;
  margin-top: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.item-content {
  position: relative;
  height: 140px;
  padding-left: 15px;
}

.item-title {
  font-weight: bold;
  line-height: 25px;
  font-size: 16px;
  padding-left: 20px;
}

.item-explain {
  font-size: 12px;
  color: gray;
  padding-left: 20px;
}

.item-specs {
  color: gray;
  font-size: 12px;
  line-height: 20px;
  position: relative;
  padding-left: 20px;
}

.item-sales {
  margin-top: 5px;
  padding-left: 20px;
}

.supplier {
  position: absolute;
  right: 0px;
  top: 0px;
}

.item-price {
  color: red;
  position: absolute;
  left: 15px;
  bottom: 0px;
  font-weight: bold;
  padding-left: 20px;
}

.item-button {
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
}

.button {
  width: 25px;
  height: 25px;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 22px;
  border-radius: 25px;
  font-weight: bold;
}

.button-number {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
}

.car-container {
  position: fixed;
  height: 45px;
  bottom: 0px;
  background-color: #fff;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  z-index: 9999;
}

.car {
  width: calc(100% - 50px);
  background: linear-gradient(to right, #e97f07, #ee832b);
  line-height: 35px;
  border-radius: 35px;
  padding-left: 20px;
  color: #fff;
}

.car-price {
  width: 100%;
  background: linear-gradient(to right, #ee832b, #e97f07);
  height: 35px;
  text-align: center;
}

.car-go {
  padding-left: 2px;
  background: linear-gradient(to right, #f05023, #f04313);
  width: 100%;
  text-align: center;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  font-weight: bold;
}

.car-sum {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
}
.btn {
  color: red;
  border-left: 1px solid #ddd;
  padding-left: 10px;
  padding-right: 5px;
}
.ha {
  /* height: calc(100vh - 100px); */
  overflow: auto;
  line-height: 50px;
  /* margin-top: 50px; */
  height: 50px;
}
</style>